<template>
  <div class="estimate-table">
    <div class="btn">
      <div><span class="yes"></span>满足</div>
      <div><span class="no"></span>不满足</div>
    </div>
    <div class="content">
      <el-table :data="tableData" border :height="maxheight" :span-method="objectSpanMethod">
        <el-table-column width="400" label-class-name="head">
          <template slot="header">
            <div class="right">装备模型</div>
            <div class="left">作战能力</div>
          </template>
          <el-table-column prop="capacityNameOne" label="一级" width="200">
          </el-table-column>
          <el-table-column prop="capacityName" label="二级" width="200">
            <template slot-scope="{ row }">
              <span style="color: #07f; cursor: pointer" @click="changCapacityName(row)">{{ row.capacityName }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="平台">
          <template v-for="(item, index) in platformList">
            <el-table-column :prop="item" :label="item" :key="index">
              <template slot-scope="{ row }">
                <span class="yes" v-if="row.coverageMap[item] == 'COVERED'"></span>
                <span class="no" v-else-if="row.coverageMap[item] == 'UNCOVER'"></span>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="详情" :visible.sync="dialogVisible" width="30%">
        <el-tree :data="treeData" :props="defaultProps" default-expand-all></el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getCapacityEvaluate, getCapacityPlan } from "@/api/project";
import { getTableColumnList } from "../../../api/capacity"
export default {
  props: {
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      platformList: [],
      tableData: [],
      maxheight: "calc(100vh - 250px)",
      dialogVisible: false,
      treeData: [],
      defaultProps: {
        children: "planDtos",
        label: "name",
      },
    };
  },
  mounted() {
    this.getData();
    this.getTableColumnData();
  },
  methods: {
    getData() {
      getCapacityEvaluate({ capacityType: this.type })
        .then((res) => {
          const { code, data } = res?.data;
          if (code == 200) {
            this.handleData(data);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    handleData(data) {
      data.forEach((item) => {
        if (item.childDtos && item.childDtos) {
          item.childDtos.forEach((items) => {
            this.tableData.push({
              capacityNameOne: item.capacityName,
              capacityIdOne: item.capacityId,
              capacityName: items.capacityName,
              capacityId: items.capacityId,
              relatedTypes: items.relatedTypes,
              coverageMap: items.coverageMap,
            });
          });
        } else {
          this.tableData.push({
            capacityNameOne: item.capacityName,
            capacityIdOne: item.capacityId,
            capacityName: "",
            capacityId: "",
            relatedTypes: [],
            coverageMap: {},
          });
        }
      });
    },
    getTableColumnData() {
      getTableColumnList()
        .then((res) => {
          const { data } = res?.data;
          this.platformList = data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        // column.property是表头的key
        let spanArr = this.getSpanArr(this.tableData, "capacityIdOne");
        const _row = spanArr[rowIndex];
        return {
          rowspan: _row,
          colspan: 1,
        };
      }
    },
    getSpanArr(data, index) {
      let spanArr = [];
      let pos = "";
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          spanArr.push(1);
          pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i][index] === data[i - 1][index]) {
            spanArr[pos] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            pos = i;
          }
        }
      }
      return spanArr;
    },
    changCapacityName(row) {
      getCapacityPlan({ capacityId: row.capacityId }).then((res) => {
        const { code, data } = res?.data;
        if (code == 200) {
          debugger
          data.forEach((item) => {
            item.name = item.taskName;
            item.id = item.taskId;
            if (item.planDtos && item.planDtos.length) {
              item.planDtos.forEach((items) => {
                items.name = items.planName;
                items.id = items.planId;
              });
            }
          });
          this.treeData = data;
          this.dialogVisible = true;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.btn {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-bottom: 16px;

  div {
    margin-right: 8px;
  }
}

.yes {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid green;
  background: green;
}

.no {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 1px solid #000;
}

:deep(td) div {
  text-align: center;
}

.left {
  text-align: left;
  position: relative;
  padding-left: 10px;
}

.left::after {
  content: "";
  width: 100%;
  height: 0px;
  position: absolute;
  border-bottom: 1px solid#EBEEF5;
  top: 0;
  left: 0;
  transform: rotate(6deg);
}

.right {
  text-align: right;
  padding-right: 10px;
}

:deep(.el-table__header) {
  .head {
    padding: 0;

    .cell {
      padding: 0;
    }
  }
}

.estimate-table {
  width: calc(100vw - 440px);
}
</style>
